/**
 * Created by Administrator on 2017/7/31.
 */
window.onload = function () {
    // 选择头像上传
    var $avator = getId('avator')
    var $dataList = getId('dataList')
    var $saveBtn = getId('saveBtn');
    var $input = $dataList.getElementsByTagName('input')
    var $fileBtnWrap = getId('fileBtn')
    $avator.onchange = function () {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function () {
            getId('image').getElementsByTagName('img')[0].src = fr.result;
            // 选择头像上传按钮点击之后css变化
            addClass($fileBtnWrap, "active")
        };
        fr.readAsDataURL(imgFile);
    };
    //textarea文本scrollHeight高度的获取
    var $comTextarea = document.getElementsByClassName('com-textarea');
    for (var i = 0; i < $comTextarea.length; i++) {
        ScrollHeingt($comTextarea[i]);
    }
    //点击+ 增加工作经历的模板
    var $addBtn = getId('addBtn')
    var $workExperience = document.getElementsByClassName('work-experience')[0];
    var $projectExperience = document.getElementsByClassName('project-experience')[0];
    var l = 2;
    $addBtn.onclick = function () {
        var str = '';
        str += '<div class="com-info"><span><input type="text" class="time" placeholder="填写入职日期" id="pre' + l + '" name="preTime' + l + '"> - <input type="text" class="time" placeholder="填写离职日期" id="next' + l + '" name="nextTime' + l + '"></span><span ><input type="text" placeholder="工作公司" name="company' + l + '"></span><span><input type="text" placeholder="工作职位" name="position' + l + '"></span></div><div class="com-txt"><textarea name="jobDuty' + l + '" class="com-textarea" >工作职责：</textarea></div>';
        if (l < 4) {
            var $div = document.createElement('div');
            addClass($div, 'work-txt-wrap');
            $div.innerHTML = str
            $workExperience.insertBefore($div, $addBtn);
            ScrollHeingt($comTextarea[l]);
            if (l == 3) {
                this.style.display = 'none'
            }
        } else {
            return
        }
        l++;
    }
    //点击+增加项目经历的模板
    var $addBtn2 = getId('addBtn2')
    var j = 2;
    $addBtn2.onclick = function () {
        var str = '';
        str += '<div class="com-info"><span><input type="text" placeholder="项目名称" name="projectName' + j + '"></span></div><div class="com-txt"><textarea name="projectDuty' + j + '" class="com-textarea" >工作职责：</textarea></div>'
        if (j < 4) {
            var $div = document.createElement('div');
            addClass($div, 'work-txt-wrap');
            $div.innerHTML = str
            $projectExperience.insertBefore($div, $addBtn2);
            ScrollHeingt($comTextarea[j]);
            if (j == 3) {
                this.style.display = 'none'
            }
        } else {
            return
        }
        j++;
    }
    //选择时间
    laydate.skin('dahong')
    var pre = timeCreate('#pre')
    laydate(pre);
    var next = timeCreate('#next')
    laydate(next);
    //本地存储key值
    for (var i = 0; i < $input.length; i++) {
        $saveBtn.onclick = function () {
            var obj = localstorageObj()
            for (var item in  obj) {
                localStorage.setItem(item, obj[item])
            }
            location.reload()
        }
    }
    // console.log(localStorage)
    //本地存储的数据更新到页面
    for (var i = 0; i < $input.length; i++) {
        if (localStorage.length == 0) {
            $input[i].value = '';
        }else {
            if($input[i].type=='file'){
                return
            }else{
                $input[i].value = localStorage[$input[i].name];
            }
        }
    }
// 创建选择事件的对象属性
    function timeCreate(idname) {
        var obj = {
            elem: idname,
            format: 'YYYY.MM'
        }
        return obj
    }
// 监听textarea的scroll高度
    function ScrollHeingt(obj) {
        obj.addEventListener('keyup', function () {
            var h = this.scrollHeight;
            this.style.height = h + 'px';
        })
    }
//获取页面上输入的key和value组成一个json对象返回
    function localstorageObj() {
        var $dataList = getId('dataList')
        var arr = $dataList.getElementsByTagName('input');
        var jsonobj = {};
        for (var i = 0; i < arr.length; i++) {
            jsonobj[arr[i].name] = arr[i].value;
        }
        return jsonobj
    }
    
    
}